<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="存储标题">
      <el-input placeholder="Enter your title" v-model="toptitle" clearable>
      </el-input>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input placeholder="Enter your phone" v-model="form.phone" clearable @blur="phonechange(form.phone)">
      </el-input>
      <el-link type="danger">{{msg}}</el-link>
    </el-form-item>
    <el-form-item label="选择时薪">
      <el-radio-group v-model="form.money">
        <el-radio label="30"></el-radio>
        <el-radio label="60"></el-radio>
        <el-radio label="90"></el-radio>
        <el-radio label="120"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="选择需求">
      <el-radio-group v-model="form.work_type">
        <el-radio label="月嫂"></el-radio>
        <el-radio label="保洁"></el-radio>
        <el-radio label="家政"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="服务时间">
      <el-col :span="11">
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        >
        </el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="服务区域">
      <el-cascader
        size="large"
        :options="options"
        v-model="selectedOptions"
        @change="handleChange"
      >
      </el-cascader>
      <el-link type="warning">提示：当前只能发布四川省成都市订单！！！！</el-link>
      <el-input
        placeholder="Enter your address"
        v-model="form.address"
        clearable
      >
      </el-input>
    </el-form-item>
    <el-form-item label="你的留言">
      <el-input type="textarea" v-model="form.remark"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即发布</el-button>
      <el-button disabled>取消</el-button>
      <el-dialog
  title="提示"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <span>你已发布成功，是否回到首页</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="jump1">确 定</el-button>
  </span>
</el-dialog>
    </el-form-item>
  </el-form>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  data() {
    return {
      form: {
        token: String(localStorage.getItem('token')),
        start_time: "",
        end_time: "",
        remark: "",
        content: "",
        phone: "",
        address: "",
        province: "",
        city: "",
        area: "",
        money: "",
        work_type: "",
      },
      toptitle: "",
      value2: "",
      options: regionData,
      selectedOptions: [],
       centerDialogVisible: false,
       star:0,
       msg:'',
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.form.work_type == "月嫂") {
        this.form.work_type ="1";
      } else if (this.form.work_type == "保洁") {
        this.form.work_type = "2";
      } else if (this.form.work_type == "家政") {
        this.form.work_type ="3";
      }
      let flag = 0;
      let cache = [{ title: this.toptitle }];
      this.form.content = JSON.stringify(cache);
      this.form.start_time = this.value2[0].getTime() / 1000;
      this.form.end_time = this.value2[1].getTime() / 1000;
      console.log(this.form);
      Object.values(this.form).map((item, index) => {
        if (item == "") {
          flag = 1;
          return;
        }
      });
      if (flag == 0 && this.star==1) {
        this.upme(this.form)
        this.centerDialogVisible=true
      } else {
        confirm("请填写完整你的需求");
      }
    },
    handleChange(value) {
      this.form.province = CodeToText[value[0]];
      this.form.city = CodeToText[value[1]];
      this.form.area = CodeToText[value[2]];
    },
    jump1(){
      this.$router.push({path:'/recommend'})
    },
    phonechange(str){
      let reg=new RegExp(/^[1]+[0-9]{10}$/)
      if(reg.test(str)){
        this.msg=''
        this.star=1
      }else{
        this.msg="请输入合法手机号"
      }
    },
    upme(val) {
      this.myaxios({
        url: "http://housekeepi.com/api/addTask",
        method: "post",
        data: val,
      })
        .then((e) => {
          console.log(e);
        })
        .catch(() => {
          console.log("error");
        });
    },
  },

};
</script>

<style>
</style>